<script setup lang="ts">
import { BaseApi } from "@/apis/base.api";
import { useUserStore } from "@/stores/user.store";
import { CheckOutlined } from "@ant-design/icons-vue";
import { message } from 'ant-design-vue';
import useForm from "@/hooks/useForm";
import useUser from "@/hooks/useUser";

// 获取详情hook
const { detailInfo, formRef, formState, onValidateFields, getFormRules } = useForm({
  // 获取表单数据
  formState: {} as Record<string, any>,
  // 获取详情数据
  async onInit() {
    formState.value = useUserStore().userInfo;
    return Promise.resolve(useUserStore().userInfo);
  },
  // 表单校验成功回调
  async onValidateSuccess(values) {
    // 编辑
    const response = await BaseApi.user.update({
      id: formState.value.id,
      nickName: values.nickName,
      loginCode: values.loginCode,
      email: values.email,
      mobile: values.mobile,
      roleList: formState.value.roleIds?.split(",")?.map(roleId => ({ roleId })) || []
    });
    if(response.success) {
      message.success("信息保存成功");
      await useUser().refresh();
    }
  }
})
</script>

<template>
  <div>
    <AForm ref="formRef" :model="formState" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" @finish="onValidateFields">
      <div class="flex flex-col gap-2">
        <WebxCard :titleProps="{ title:'基本信息' }">
          <ARow class="px-2 pb-4" :gutter="[0, 10]">
            <ACol :span="8">
              <AFormItem label="昵称" name="nickName">
                <AInput v-model:value="formState.nickName" placeholder="请输入用户昵称" />
              </AFormItem>
            </ACol>
            <ACol :span="8">
              <AFormItem
                label="登录账号"
                name="loginCode"
                :rules="[{ required: true, message: '请输入用户登录账号' }]"
              >
                <AInput
                  v-model:value="formState.loginCode"
                  placeholder="请输入用户登录账号"
                />
              </AFormItem>
            </ACol>
            <ACol :span="8">
              <AFormItem label="邮箱" name="email">
                <AInput v-model:value="formState.email" placeholder="请输入用户邮箱" />
              </AFormItem>
            </ACol>
            <ACol :span="8">
              <AFormItem label="手机号" name="mobile" :rules="getFormRules('mobile')">
                <AInput v-model:value="formState.mobile" placeholder="请输入用户手机号" />
              </AFormItem>
            </ACol>
          </ARow>
        </WebxCard>
        <WebxCard :titleProps="{ title:'我的角色' }" v-if="useUserStore().userInfo.roleNames">
          <div class="flex flex-wrap gap-2">
            <ATag color="blue" v-for="roleName in useUserStore().userInfo.roleNames?.split(',') || []">{{ roleName }}</ATag>
          </div>
        </WebxCard>
      </div>
      <AFormItem :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }">
        <div class="py-10 flex justify-end items-center gap-2">
          <AButton type="primary" htmlType="submit"><CheckOutlined /> 保存</AButton>
        </div>
      </AFormItem>
    </AForm>
  </div>
</template>

<style scoped lang="less">
.ant-form-item {
  margin-bottom: 0;
}
</style>
